/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    IconButton,
    IconX,
    useToast,
    InputPure,
    SuffixInput,
    Popover,
    PopoverContent,
    PopoverHeading,
    PopoverDescription,
    PopoverClose,
    Touchable,
    PopoverRefer,
    ListFlexRow,
    DdMenu,
    IconRefButton,
    IconMoreVertical,
    DdMenuItem,
    Text,
    Itext,
    IconAnchor,
    IconPlus, IconMaximize2, IconVideo, IconVideoOff
} from "customize-easy-ui-component";

import {Dispatch, SetStateAction, useContext} from "react";
// import RoutingContext from "../routing/RoutingContext";
import {SuffixRefInput} from "customize-easy-ui-component/esm/Form";
import {eqpTypeAllMap} from "../../dict/eqpComm";
import {reportStatusMap} from "../../task/DeviceListItem";
import {useDeviceMultiSelect} from "../../device/hook/useDeviceMultiSelect";
import cutting_board_knife from "../images/cutting-board-knife.jpg";
import {UseState_Enum} from "../../device/__generated__/DetailedGuideQuery.graphql";
import RoutingContext from "../../routing/RoutingContext";
import {useEqpsParamModify} from "../hook/useEqpsParamModify";


export interface IdName{
    id: string,
    name: string,
}

/**因为 sessionStorage以及Relay共同都会用的； 类型适配器。 不是都来自Relay Query<>;
 * 简易的已经选定设备列表-每个设备部分关键字段
 * 5--6行装得下的。Popover; 3个TAB *2字段*5行;
 * */
export interface IEqpEntity {
    id: string,
    //检验编码
    cod: string,
    //监察编码
    oid: string,
    //客户单位内部编号
    plno: string,
    //出厂编号
    fno: string,
    //设备名称，设备(装置)名称
    titl: string,
    //上路号牌
    plat: string,
    //使用状态
    ust: UseState_Enum,
    //设备品种
    vart: string,
    //使用证号
    cert: string,
    //下次检验日期1 （在线、年度）粗的检 ，
    nxtd1: string,
    //下次检验日期2 (机电定检，内检，全面）
    nxtd2: string,
    //投入使用日期
    used: string,
    //法定检验机构
    ispu: IdName,
    //下属检验部门
    ispud: IdName,
    //设备地址
    address: string,
    //使用单位
    useu: IdName,
    //楼盘
    vlg: IdName,
    //行政区划   ：类型 没有特别强制声明的。 和后端Eqp Device Equipment接口模型{ad:?}一致吗?
    ad: any,
    //设备联系人手机号
    lpho: string,
}


/**关联对象，从大列表中选择一个对象的，可套用这个伪对话框模式。
 * */
interface Props {
    index: number;
    //关联对象id； 跳转伪对话框路由页面的，初始化选中搜索列表中的那一条。
    // id?: string | undefined;
    //当前关联对象id所指向的挂接对象模型的给用户看的关键名:标题= 单位名字;
    // name?: string | undefined;
    //删除当前的输入数据，关联对象id=null。

    //伪对话框起跳前的当前编辑器数据打包; 触发了点击，保存状态，返回后才能恢复啊。正在当前编辑器页面修改的字段都存储到history.state;
    onDialog?: () => any;
    //[目的]指引转入伪对话框跳转路由页面去做state{}数据修改==选择设置某字段。
    //表示给用户看的关键字，用户以此识别编辑器是哪一个。发起人编辑器页面也需要核对emodel后提取Ndt保存数据，以及跳转当前输入焦点到刚刚被选中的伪对话目标字段autoFocus。
    //emodel?: string | undefined;
    //当前编辑的哪一个字段： 选择关联对象后要挂接字段。以及返回页面后跳转当前输入焦点到刚刚被选中的伪对话目标字段autoFocus。
    //叶子层次的非{}内嵌对象类型的：最后不可再分的属性，基本类型字段。
    field: string;
    //history.push(,state)无法传入function()给state的；@只能变相的做法，传递数据引用的结构路径名了。
    //【对象不一定就是一层】深度复制的？ 嵌套多层次结构的复杂引用对象如何办：
    //倒数第二层的/父辈第一级的:要设置的是嵌套的第二层的对象中的字段。 比如编辑器映射字段实际是：eqp.svp.{第二层的字段}那么就应该设置p1field=“svp”;
    p1field?: string;
    //路径path+部分queryString参数; 用户选择完毕所需要的关联对象之后，点击返回URL;支持当前SPA的path路径,自带?号的;
    //reurl: string;
    autoFocus?: boolean;
    //伪对话框需要跳转去的页面URL
    // dialogUrl: string;
    oldpars: Array<any>;
    //实际是[][]二维类型的;第一维度=单个参数， 第二维度=单个设备或管道单元的变更目标取值。
    allmp: Array<any>;
    setAllmp: Dispatch<SetStateAction<Array<any>>>;
    //伪对话框返回机制导致的：devices还不算是真正的未修改数据，这个保存Relay读的设备，最原始[]。
    orgDevs?: Array<IEqpEntity>;
    //可以编辑修改的模式
    edit: boolean;
    //部分数据源属于快照历史性信息，可能并非最新后端数据的。
    jsoned?: boolean;
    //单一个技术参数
    // param: string;
    paramConf: any[];    //当前参数的配置对象数组。
    //当前平台这些设备的参数取值{模型全部字段}
    devpis: any[];
    viewOld?: boolean;
}
/**单一个技术参数的变更：但是多个设备或多单元的。有几个参数就要准备几个本组件。
 * 发送后端模型数据allmp 编辑结果；实际是二维度的结构 参数维度：下面嵌套的是设备维度的编辑 [[],[]]。
 * 注意allmp[][]进入本组件必须初始化！ 【特别别扭】
 * modifys->allmp->eqpparvls->allmp副作用链条导致死循环的可能性！须确保allmp已经不变，step!==1 && paramx{<EqpsParamModify/>来排除死循环！
 */
export const EqpsParamModify= ({index, setAllmp,paramConf,devpis, onDialog, field,p1field, jsoned,
                           autoFocus,allmp,oldpars,edit,orgDevs,viewOld=true,  ...other }:Props) =>
{
    //这里【】设备对象数据实际来自父辈页面的内省传递来的，有可能并不是完整对象，不是所有字段都有数据的。
    const { history } = useContext(RoutingContext);
    const reurl= history.createHref(history.location);     //我自己现在是哪个URL,跳转伪对话框路由页面之后，还得关闭对话框=还得跳转回这个URL来啊。
    //真正的可修改编辑，光光edit还不够表达：拆解状态和功能，同时兼容代码复用。  autoFocus代表应该进入编辑模式。
    const [editing, setEditing] = React.useState(edit && autoFocus);

    //点击删除某个设备｛申明进入了编辑修改状态｝，点击增加切换URL,；返回数组eqpparvls是全部设备当前参数的变更模型。
    const {view: selectDevsDialog,eqpparvls}= useEqpsParamModify({
        eqsum: devpis?.length,
        paramConf,
        devpis,
        modifys: allmp[index],
        oldvals: oldpars[index],
        viewOld
    });
    //申请变更的某一个参数项目：所有设备管道的最新目标取值的录入？
    //根据hook下一级多个输入组件的编辑结果eqpparvls再去做汇总合并，更新准备给后端的模型数据allmp；
    //【死循环】特别处置： #@ 底下的依赖,allmp不能加上。
    React.useEffect(() => {
        if(eqpparvls?.length>0) {        //防止上级组件setAllmp([])后进这里还死灰复燃恢复旧的allmp数据！
            let obnew: any[] = allmp[index];        //对应某一个参数的坑。
            obnew= eqpparvls;
            //allmp实际是[][]二维类型的， 第一维度=单个参数， 第二维度=单个设备或管道单元的变更目标取值。
            allmp.splice(index, 1, obnew);
            // setAllmp([eqpparvls]);
            setAllmp([ ...allmp ] );
        }else{
            let obnew=new Array(devpis?.length);
            allmp.splice(index, 1, obnew);
            setAllmp([ ...allmp ] );
        }
        // console.log("嵌套setAllmp组件=",allmp,"化￥=",eqpparvls);
    }, [eqpparvls, index, devpis?.length , setAllmp]);

  return (
      <>
          {selectDevsDialog}
      </>
  );
}

